<template>
  <div class="checkout">
    <Header>提交订单</Header>

    <section ref="section">
      <div>

        <div class="addr" @click="showAddress = true">
          <div class="left">
            <div class="user">
              <span>{{ addr.consignee }}</span>
              <span>{{ addr.consignee_tel }}</span>
            </div>

            <div class="wz">
              <p>
                <span>{{ addr.area }}</span>
                {{ addr.address }}
              </p>
            </div>
          </div>
          <icon class="icon" name="arrow" />
        </div>

        <div class="pay">
          <h4>支付方式</h4>
          <span>支付宝</span>
        </div>

        <div class="goods-list">
          <div class="goods" v-for="item of orderGoods" :key="item.goods.id">
            <img :src="this.baseUrl + item.goods.img_url">
            <div>
              <div>{{ item.goods.name }}</div>
              <div>￥{{ item.goods.price }}</div>
            </div>
            <span>
              X{{ item.num }}
            </span>
          </div>
        </div>

      </div>
    </section>

    <div v-show="showAddress">

      <div ref='addrListWrapper' class="addrList">

        <div>
          <div class="addr" v-for="address, index of addresses" :key="address.id" @click="handleAddrClick(index)">
            <div class="left">
              <div class="user">
                <span>{{ address.consignee }}</span>
                <span>{{ address.consignee_tel }}</span>
              </div>

              <div class="wz">
                <p>
                  <span>{{ address.area }}</span>
                  {{ address.address }}
                </p>
              </div>
            </div>
            <icon class="icon" name="arrow" />
          </div>
        </div>

      </div>

    </div>

    <footer>
      <div>
        共<span>{{ orderGoods.reduce((prev, cur) => prev += cur.num, 0) }}</span>件，总金额：
        <span>￥{{ orderGoods.reduce((prev, cur) => prev += cur.num * cur.goods.price, 0) }}</span>
      </div>
      <button @click="handleSubmit">提交订单</button>
    </footer>
  </div>
</template>

<script setup>
//引入better-scroll
import BScroll from '@better-scroll/core'
import ObserveDOM from '@better-scroll/observe-dom'
import ObserveImage from '@better-scroll/observe-image'

import Header from '../components/common/Header.vue'
import { useStore } from "vuex"
import { ref, onMounted } from 'vue'
import { deliveryAddress_all } from '@/api/deliveryAddressApi'
import { Icon, Locale, Overlay } from "vant"
import { indent_add } from '@/api/indentApi.js'

const store = useStore()

let orderGoods = store.state.cart.filter(item => item.checked)

let addresses = await deliveryAddress_all()
let addr = ref(addresses[0])

let showAddress = ref(true)

const handleAddrClick = (index) => {
  showAddress.value  = false
  addr.value = addresses[index]
}

const handleSubmit = async () => {
  let allPrice = orderGoods.reduce((prev, cur) => prev += cur.num * cur.goods.price, 0)
  let items = orderGoods.map( item => ({ goods_id: item.goods.id, num: item.num }) )
  let url = await indent_add(addr.value.id, allPrice, items)
  store.commit('delCheckedGoodsCart')
  window.location.href = url
}

const addrListWrapper = ref()
onMounted(() => {
  BScroll.use(ObserveDOM)
  BScroll.use(ObserveImage)
  new BScroll(addrListWrapper.value, {
    observeDOM: true,
    observeImage: true,
    click: true
  })
  showAddress.value = false
})

</script>

<style lang="less" scoped>
.checkout {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  section {
    flex: 1;
    overflow: hidden;
    background-color: #f5f5f5;

    >div {

      .addr {
        display: flex;
        align-items: center;
        min-height: 100px;
        background-color: #fff;
        margin-top: 10px;

        .left {
          flex: 1;
          overflow: hidden;
          padding: 15px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .user {
            color: #333;
            font-size: 14px;
            font-weight: 700;
            padding: 0 0 8px ;
            span:nth-of-type(1) {
              margin-right: 15px;
            }
          }

          .wz{
            font-size: 14px;
            color: #222;
            p {
              word-break: break-all;
              word-wrap: break-word;
            }
          }
        }
        .icon {
          font-size: 26px;
          color: #9e9e9e;
          width: 50px;
          text-align: center;
        }
      }

      .pay {
        background-color: #fff;
        margin-top: 15px;
        padding: 15px;
        h4 {
          padding: 5px 0;
          font-weight: 400;
          font-size: 14px;
        }
        span{
          display: inline-block;
          padding: 5px;
          border: 2px solid #b0352f;
        }
      }

      .goods-list{
        margin-top: 15px;
        background-color: #FFF;
        .goods{
          box-sizing: border-box;
          height: 100px;
          display: flex;
          align-items: center;
          padding:10px 15px;
          position: relative;
          border-bottom: 1px solid #e8e8e8;
          img{
            display: block;
            width: 75px;
            height: 75px;
          }

          >div {
            height: 100%;
            display: flex;
            flex-direction: column;
            margin-left: 15px;
            div:nth-of-type(1) {
              font-size: 14px;
            }

            div:nth-of-type(2) {
              font-size: 16px;
              margin-top: auto;
              color: #b0352f;
            }
          }

          >span {
            position: absolute;
            right: 10px;
            bottom: 10px;
          }
        }
      }

    }
  }

  .addrList{
    position: absolute;
    top: 60px;
    left: 10px;
    right: 10px;
    bottom: 20px;
    background-color: #f5f5f5;
    z-index: 999;
    overflow: hidden;

    .addr {
      display: flex;
      align-items: center;
      min-height: 100px;
      background-color: #fff;
      margin-top: 10px;

      .left {
        flex: 1;
        overflow: hidden;
        padding: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .user {
          color: #333;
          font-size: 14px;
          font-weight: 700;
          padding: 0 0 8px ;
          span:nth-of-type(1) {
            margin-right: 15px;
          }
        }

        .wz{
          font-size: 14px;
          color: #222;
          p {
            word-break: break-all;
            word-wrap: break-word;
          }
        }
      }
      .icon {
        font-size: 26px;
        color: #9e9e9e;
        width: 50px;
        text-align: center;
      }
    }
  }

  footer {
    height: 45px;
    display: flex;
    align-items: center;
    box-shadow: 0px 0 3px rgba(0, 0, 0, .3);
    padding-left: 15px;
    >div{
      width: 250px;
      span {
        color: #b0352f;
      }
      span:nth-of-type(2) {
        font-size: 18px;
      }
    }

    button {
      background: #b0352f;
      height: 45px;
      flex: 1;
      border: none;
      color: #fff;
      font-size: 18px;
    }
  }
}
</style>